<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px">
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      label-position="left"
      label-width="150px"
      :disabled="viewMode === 'view'"
    >
      <el-form-item label="分类名称" prop="categoryName">
        <el-input
          v-model="formData.categoryName"
          placeholder="请输入分类名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input
          v-model="formData.description"
          placeholder="请输入描述"
          type="textarea"
        ></el-input>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button type="primary" v-if="viewMode !== 'view'" @click="submitForm"
        >提交</el-button
      >
      <el-button @click="closeDialog">关闭</el-button>
    </template>
  </el-dialog>
</template>
<script>
import DeviceCategoryService from "@/api/device-category.js";
export default {
  name: "MyDialog",
  data() {
    return {
      viewMode: "",
      dialogVisible: true, // 初始时对话框可见
      dialogTitle: "添加设备分类", // 对话框标题
      // 表单数据
      formData: {
        categoryName: "",
        parentId: "",
        description: "",
        isRoot: false,
      },
      // 校验规则
      rules: {
        categoryName: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 初始化添加根分类
    initAddRootCategory() {
      console.log("initAddRootCategory");
      this.viewMode = "addRoot";
      this.dialogTitle = "添加根分类";
      this.formData.isRoot = true;
      this.formData.parentId = "";
    },
    // 初始化添加子分类
    initAddSubCategory(row) {
      console.log("initAddSubCategory", row);
      this.viewMode = "addSub";
      this.dialogTitle = "添加子分类";
      this.formData.isRoot = false;
      this.formData.parentId = row.id;
    },
    // 初始化查看分类
    initViewCategory(row) {
      this.viewMode = "view";
      this.dialogTitle = "查看分类";
      this.formData = {
        ...row,
      };
    },
    // 初始化修改分类
    initModifyCategory(row) {
      console.log("initModifyCategory", row);
      this.viewMode = "modify";
      this.dialogTitle = "编辑";
      this.formData = {
        ...row,
      };
    },
    // 提交表单
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 提交表单数据
          console.log(this.formData);
          if (this.viewMode === "addRoot" || this.viewMode === "addSub") {
            this.submitForAdd();
          } else if (this.viewMode === "modify") {
            this.submitForModify();
          }
          // 调用服务层方法创建分类
        } else {
          console.log("校验失败");
        }
      });
    },
    /**
     * 添加根分类和子分类
     */
    submitForAdd() {
      DeviceCategoryService.createDeviceCategory(this.formData).then(
        async (res) => {
          let data = await res.json();
          if (data.code === 200) {
            this.$notify.success({
              title: "操作成功",
              message: "添加成功",
            });
            this.onCloseAndRefresh();
          } else {
            this.$notify.error({
              title: "操作失败",
              message: data.message,
            });
          }
        }
      );
    },
    /**
     * @description 提交修改
     */
    submitForModify() {
      DeviceCategoryService.updateDeviceCategory(this.formData).then(
        async (res) => {
          let data = await res.json();
          if (data.code === 200) {
            this.$notify.success({
              title: "操作成功",
              message: "编辑成功",
            });
            this.onCloseAndRefresh();
          } else {
            this.$notify.error({
              title: "操作失败",
              message: data.message,
            });
          }
        }
      );
    },
    // 关闭对话框并刷新数据
    onCloseAndRefresh() {
      this.$emit("close");
      // 当前操作的是不是根节点
      if (this.formData.isRoot) {
        this.$emit("refresh", "table");
      } else {
        this.$emit("refresh", "node", this.formData.parentId);
      }
    },
    // 关闭对话框
    closeDialog() {
      this.$emit("close", false);
    },
  },
};
</script>
